console.log('banner.js已加载');

// 确保DOM加载完成
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initBanner);
} else {
  initBanner();
}

function initBanner() {
  console.log('开始初始化banner切换功能');
  
  // 获取banner相关元素
  const bannerSlider = document.querySelector('.banner-slider');
  if (!bannerSlider) {
    console.error('未找到banner-slider元素');
    return;
  }
  
  const slides = bannerSlider.querySelectorAll('.banner-slide');
  const prevButton = bannerSlider.querySelector('.banner-prev');
  const nextButton = bannerSlider.querySelector('.banner-next');
  const indicatorsContainer = bannerSlider.querySelector('.banner-indicators');
  
  // 如果只有单个幻灯片且缺少控制元素，就简单显示幻灯片而不启用轮播功能
  if (slides.length === 1 && (!prevButton || !nextButton || !indicatorsContainer)) {
    console.log('检测到简单banner模式，只显示单个幻灯片');
    lazyLoadSlideImage(slides[0]);
    slides[0].classList.add('active');
    return;
  }
  
  if (!slides.length || !prevButton || !nextButton || !indicatorsContainer) {
    console.error('banner必要元素缺失');
    return;
  }
  
  console.log(`找到${slides.length}个banner幻灯片`);
  
  // 当前活动幻灯片索引
  let currentIndex = 0;
  
  // 创建指示器按钮
  createIndicators();
  
  // 获取创建的指示器按钮
  const indicators = indicatorsContainer.querySelectorAll('.banner-indicator');
  
  // 实现图片懒加载 - 只加载当前和下一张图片
  lazyLoadSlideImage(slides[currentIndex]);
  if (slides.length > 1) {
    lazyLoadSlideImage(slides[1]);
  }
  
  // 设置初始活动状态
  updateBannerState();
  
  // 添加图片懒加载辅助函数
  function lazyLoadSlideImage(slide) {
    // 检查是否已经加载过
    if (slide.classList.contains('image-loaded')) {
      return;
    }
    
    // 从style属性中提取背景图片URL
    const style = slide.getAttribute('style');
    if (!style) return;
    
    const match = style.match(/url\(['"]?(.*?)['"]?\)/);
    if (!match || !match[1]) return;
    
    const imgUrl = match[1];
    
    // 创建一个临时图片对象来预加载
    const img = new Image();
    img.onload = function() {
      console.log('Banner图片已加载:', imgUrl);
      // 图片加载完成后才真正设置背景
      slide.style.backgroundImage = `url('${imgUrl}')`;
      slide.classList.add('image-loaded');
    };
    img.src = imgUrl;
  }
  
  // 添加事件监听
  prevButton.addEventListener('click', showPreviousSlide);
  nextButton.addEventListener('click', showNextSlide);
  
  // 为每个指示器添加点击事件
  indicators.forEach((indicator, index) => {
    indicator.addEventListener('click', () => {
      goToSlide(index);
    });
  });
  
  console.log('banner切换功能初始化完成');
  
  // 创建指示器按钮函数
  function createIndicators() {
    // 清空现有指示器
    indicatorsContainer.innerHTML = '';
    
    // 为每个幻灯片创建一个指示器
    slides.forEach((_, index) => {
      const indicator = document.createElement('button');
      indicator.classList.add('banner-indicator');
      if (index === currentIndex) {
        indicator.classList.add('active');
      }
      indicator.setAttribute('aria-label', `显示幻灯片 ${index + 1}`);
      indicatorsContainer.appendChild(indicator);
    });
  }
  
  // 显示上一张幻灯片
  function showPreviousSlide() {
    console.log('点击上一张按钮');
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    updateBannerState();
  }
  
  // 显示下一张幻灯片
  function showNextSlide() {
    console.log('点击下一张按钮');
    currentIndex = (currentIndex + 1) % slides.length;
    updateBannerState();
  }
  
  // 跳转到指定幻灯片
  function goToSlide(index) {
    console.log(`跳转到幻灯片 ${index + 1}`);
    currentIndex = index;
    updateBannerState();
  }
  
  // 更新banner状态
  function updateBannerState() {
    console.log(`更新banner状态，当前索引: ${currentIndex}`);
    
    // 更新幻灯片显示状态
    slides.forEach((slide, index) => {
      if (index === currentIndex) {
        // 确保当前幻灯片的图片已加载
        lazyLoadSlideImage(slide);
        slide.classList.add('active');
      } else {
        slide.classList.remove('active');
      }
    });
    
    // 预加载下一张幻灯片的图片
    const nextIndex = (currentIndex + 1) % slides.length;
    lazyLoadSlideImage(slides[nextIndex]);
    
    // 更新指示器状态
    const indicators = indicatorsContainer.querySelectorAll('.banner-indicator');
    indicators.forEach((indicator, index) => {
      if (index === currentIndex) {
        indicator.classList.add('active');
      } else {
        indicator.classList.remove('active');
      }
    });
  }
}